import { Space, Table, Button, message } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { http } from '@/service'
import { useNavigate } from 'react-router-dom'

function ArticleTable({ data, params, changePageination, updata }) {
  const navigate = useNavigate()
  const delChange = async (id) => {
    try {
      await http.get(`/mp/articles?${id}`)
      message.open({
        type: 'success',
        content: '删除成功',
      })
      updata()
    } catch (err) {
      console.log('错误')
    }
  }
  const editChange = (id) => {
    navigate(`/publish?id=${id}`)
  }
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      width: 100,
    },
    {
      title: 'ID',
      dataIndex: 'id',
      width: 200,
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
      width: 150,
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      width: 80,
    },
    {
      title: '操作',
      width: 150,
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            icon={<EditOutlined />}
            onClick={() => editChange(record.id)}>
            编辑
          </Button>
          <Button
            type="primary"
            onClick={() => delChange(record.id)}
            danger
            icon={<DeleteOutlined />}>
            删除
          </Button>
        </Space>
      ),
    },
  ]
  return (
    <Table
      columns={columns}
      dataSource={data.list}
      loading={data.loading}
      rowKey="id"
      pagination={{
        defaultCurrent: params.page,
        defaultPageSize: params.per_page,
        total: data.total,
      }}
      scroll={{ y: 'calc(100vh - 350px)' }}
      onChange={(value) => changePageination(value)}
    />
  )
}

export default ArticleTable
